<template>
    <div class="settingh">
        <p class="top1">
            <span class="icon icon1" @click="tosetting">&#xe63a;</span>
            <span class="icon icon2">&#xe64c;</span>
            <!-- <button>退出登录</button> -->
        </p>
        <!-- <div class="bottom1">
            <p></p>
            <p>
                <span></span><br/>
                <span></span>
            </p>
        </div> -->
        <div class="gotologin">
            <p><span>&#xe660;</span></p>
            <!-- <actionsheet
            :actions="actions"
            >
            <span>&#xe660;</span>
            </actionsheet> -->
            <p>欢迎<span>{{user.username}}</span>光临商城</p>
            <!-- <input type="button" value="立即登录" @click="gotologin"> -->
        </div>
    </div>
</template>

<script>
import {
  mapState
} from 'vuex'
import { Actionsheet } from 'mint-ui'
export default {
  name: 'settingheader',
  components: {
    Actionsheet
  },
  methods: {
    gotologin () {
    //   console.log(this)
      this.$router.history.push('/login')
    },
    tosetting () {
      this.$router.history.push('/tosetting')
    }
  },
  computed: {
    ...mapState(['user'])
    //   getname () {
    //     //   console.log(window.localStorage.getItem('login-user').id)
    //     return{
  }

}
</script>

<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_wdge2pny96i.eot');
  src: url('//at.alicdn.com/t/font_931790_wdge2pny96i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_wdge2pny96i.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_wdge2pny96i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_wdge2pny96i.svg#iconfont') format('svg');
}
.icon {
    font-family: 'iconfont';
    float: left;
    color: white;
    // &:nth-child(2){}
}
  .top1{
        height: 60px;
        padding: 20px;
        span{
            display: block;
            float: left;
        }
        button{
            float: left;
        }
    }
.icon1{
    margin-left: 20px;
    // margin-top: 20px;
}
.icon2{
    float: right;
    margin-right: 20px;
    margin-left: 261px;
}
.settingh{
    height: 200px;
    width: 100%;
    background: #263238;
    .gotologin{
        height: 110px;
        width: 100%;
        // line-height: 100px;
        text-align: center;
        p{
            font-size: 20px;
            height: 50px;
            line-height: 50px;
            color: white;
            span{
                font-size: 28px;
                margin: 0 10px;
            }
            &:nth-child(1){
                span{
                    font-family: iconfont;
                    font-size: 50px;
                }
            }
        }
    }
}
</style>
